<template>
    <div class="main">
        <!-- 顶部导航（组件复用） -->
        <my-top-nav></my-top-nav>

        <!-- 中部内容 -->
        <div class="center_context" style="height: calc(100vh - 70px)">
           
            <!--地图：哈哈，精彩内容开始辽……-->
            <div class="map-display" id="mapDiv">
            </div>

            <!-- 地图左上角按钮栏 -->
            <div id="myToolBtns" class="mytool-btns">
                <!-- 按钮组 -->
                <div id="buttonDiv" style="float: left;">                    
                    <!-- 按钮2：工具2案例 -->
                    <div class="navbtn-items" v-if=tool2Show @click="togglePanel('tool2PanelVisible','tool2Flag')" title="工具2" id="layerBtn">
                        <img src="../assets/images/map_icons/layer.png">
                        <img v-show="tool2Flag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>        
                </div>  <!-- buttonDiv结束 -->              
            </div> <!-- myToolBtns结束 -->

        </div> <!-- 中部内容结束 -->
    </div> <!-- 最外层Div结束 -->
</template>

<script>

import TopNav from '../components/TopNav.vue';

import 'ol/ol.css';
import {Map,View} from 'ol';


export default {
    name:'MyMapTemplate-Map2',
    components: {
        MyTopNav:TopNav
    },
    props: {
        /*mapCtrlTools:{
            type:Array,
            default:function () {
                return []
            }
        },
        lyrdata: {
            type: Array,
            default: []
        },
        mapParams: {
            type: Object,
            default: {}
        },*/
    },
    data () {
        return {
          /**功能组按钮控制**/          
          tool2Show: false, //“工具2”按钮的控制-功能启动图标按钮，默认false不显示

          /**地图各悬浮面板的可视状态**/         
          tool2PanelVisible:false, //默认true为隐藏

          /*选中显示红色小标志*/
          tool2Flag: false, //“工具2”选中显示红色小标志，默认false为隐藏

          
        }
    },
    methods:{
        //切换面板功能函数
        togglePanel(attr,attr2){
            this[attr] = !this[attr];
            this[attr2] = !this[attr2];
        },

        //地图初始化方法
        InitMap(){
            
            //初始化地图容器
            let map = new Map({
                    target: 'mapDiv',
                    view: new View({
                        center: [109.43, 33.48],
                        zoom: 7,
                        projection: 'EPSG:4326',
                    }),
            });
               
            //初始化地图文档图层对象
            let mapDocLayer = new Zondy.Map.MapDocTileLayer('', 'Ceshi1', {
                    ip: `jlu3s.com`,
                    port: `35017`,
            })
                //将地图文档图层加载到地图中
            map.addLayer(mapDocLayer);



        },//end of InitMap()
        F2(){

        },
        F3(){

        },
        F4(){

        },
        F5(){

        },

    },
    created() {
        
    },
    mounted() {
        // 页面各元素挂载就绪后执行
        this.InitMap();
    },
    watch:{

    },
    computed:{

    }
}
</script>

<style scoped>

/* 地图容器基本样式 */
.map-display {
    position: absolute;
    width: 100%;
    height:100%;
    background-color: darkgray;
  }

/*地图工具栏相关样式  */
.mytool-btns{
    position: relative;
    /*left: 10px;*/
    margin-left:2.5em;
    top: 10px;
    height: 60px;
    /*width:320px;*/ /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
    width:450px; /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
  }

  .navbtn-items{
    float: left;
    margin: 0 5px;
    /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
  }

  .navBtnDiv{
    /*width: auto;*/
    /*background-color:rgba(0,0,0,0);*/
    margin-left: 55px;
    /*margin-top: 5px;*/
  }
  .navbtn-btn{
    margin-right: 10px;
  }

  .navbtn-items:hover{
    cursor: pointer;
  }

  .navbtn-items>img{
    width:36px;
    height:36px;
    padding:5px;
  }
  .item-selected {
    position: absolute;
    width: 25px !important;
    height: 25px !important;
    left: 15px !important;
    bottom: 0;
  }

  

</style>